<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-09 14:04:22
 * 天凉好个秋
-->
<template>
    <ul class="menuBox">
        <li
            class="menuItem hover"
            :class="{ 'actived-bg': item.path === currentMenu }"
            v-for="item in baseMenu"
            :key="item.path"
            @click="menuClick(item)"
        >{{ item.name }}</li>
    </ul>
</template>

<script lang='ts' setup>
import { computed, reactive, ref } from 'vue'
import { IBaseMenu } from './types'
import { useI18n } from '@/hooks/locales/useI18N'
import { useRoute, useRouter } from 'vue-router'

const { t } = useI18n()
const route = useRoute()
const router = useRouter()

const currentMenu = computed(() => '/' + route.fullPath.split('/')[1])


const baseMenu: Array<IBaseMenu> = reactive(
    [
        {
            name: t('leftSide.foundMusic'),
            path: '/foundMusic'
        },
        {
            name: t('leftSide.podcast'),
            path: '/podcast'
        },
        {
            name: t('leftSide.video'),
            path: '/video'
        },
        {
            name: t('leftSide.friend'),
            path: '/friend'
        },
        {
            name: t('leftSide.live'),
            path: '/live'
        },
        {
            name: t('leftSide.priveteFM'),
            path: '/priveteFM'
        }
    ]
)
// 菜单点击
const menuClick = ({path}: IBaseMenu) => {
    router.push(path)
}
</script>

<style scoped lang='scss'>
.menuBox {
    @apply w-full px-3 pt-3;
    color: $main-text-color;
    .menuItem {
        @apply flex items-center w-full pl-3 text-sm rounded transition-all duration-300 select-none;
        height: 37px;
        margin-top: 2px;
    }
    .actived-bg {
        @apply text-base font-bold;
    }
}
</style>